<template>
	<view class="root-box root-container root-page-top">
		<view class="content">
			<view class="form-box">
				<uv-form labelPosition="left" :model="form" :rules="rules" ref="refForm" :borderBottom="true">
					
					<uv-form-item label="姓名" prop="real_name" :required="true" :borderBottom="true" :labelWidth="80">
						<uv-input v-model="form.real_name" placeholder="请输入姓名" border="none"/>
					</uv-form-item>
					
					<uv-form-item label="手机号码" prop="tel" :required="true" :borderBottom="true" :labelWidth="80">
						<uv-input v-model="form.tel" placeholder="请输入手机号码" border="none"/>
					</uv-form-item>
					
					<uv-form-item label="个人简历" prop="resume" :required="true" labelPosition="top" :labelWidth="80">
						<uv-textarea v-model="form.resume" placeholder="请简要介绍您的从业经历、专业背景等" 
						border="none" :customStyle="{backgroundColor:'#efefef',marginTop:'20rpx'}" :maxlength="500"></uv-textarea>
					</uv-form-item>
					
					<uv-form-item label="直推账号信息" prop="msg" labelPosition="top" :labelWidth="200">
						<view class="push-user-box">
							<view class="loop-item" v-for="(item, index) in pushUserList" :key="index">
								
								<view class="flx-default loop-user-box">
									<uv-avatar
										:src="item.avatar"
										size="40" />
									<view class="pl-10">
										<view class="fz24">{{item.nickname}}</view>
										<view class="fz24 cgray">{{'ID:'+item.id}}</view>
									</view>
								</view>
								
							</view>
							
						</view>
						
					</uv-form-item>
					

				</uv-form>
			</view>
			<view class="mt-30">
			<uv-button type="primary" text="提交资料" customStyle="margin-top: 10px" @click="submit" color="red"></uv-button>
			</view>
			<view class="bottom-box mt-20">
				<view class="flx-default fz20 cgray">
					<view>
						<uv-checkbox-group v-model="checkboxValue" >
						<uv-checkbox activeColor="red"></uv-checkbox>
						</uv-checkbox-group>
					</view>
					<view > 我已阅读并同意</view> <view class="cred">《联创合伙人协议》</view>
				</view>
				
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app'

	import {
		storeToRefs
	} from 'pinia'

	import {
		useUserStore
	} from '@/store'
	import {
      getDirectlyInvitePeople,
	  trainingRegistrationAdd
	} from '@/api/other.js'

	import {
		navigate
	} from '@/util/tools.js';
	const user = useUserStore()
	const {
		token,
		userInfo
	} = storeToRefs(user)

	const form = ref({
		"real_name": "",
		"tel": "",
		"resume": ""
	})
	
	
	
	const checkboxValue=ref(false)
	const refForm=ref(null)

	const rules = ref({
		real_name: [{
			required: true,
			message: '此为必填字段',
			trigger: ['blur', 'change']
		}],
		tel: [{
			required: true,
			message: '此为必填字段',
			trigger: ['blur', 'change']
		}],
		resume: [{
			required: true,
			message: '此为必填字段',
			trigger: ['blur', 'change']
		}],
	})
	
	const pushUserList=ref([])
	
	const handGetDirectlyInvitePeople= async()=>{
		const res = await getDirectlyInvitePeople()
		if (res.code === 200) {
			console.log('--getDirectlyInvitePeople-----',res)
			pushUserList.value = res.result
		   
		}
	}
	

	const submit =async () => {
		
		if(!checkboxValue.value || checkboxValue.value.length==0){
			uni.$uv.toast('请同意联创合伙人协议')
			return false;
		}
		
		
		
		refForm.value?.validate().then(res => {
							
						}).catch(errors => {
							uni.$uv.toast('表单内容不完整')
							return false
						})
						
						
						
						
		
		
		const res = await trainingRegistrationAdd(form.value)
		if (res.code === 200) {
			uni.$uv.toast('培训信息提交成功')
		}
		

	}
	
	const init = async () => {
		await handGetDirectlyInvitePeople()
			
	}
	
	init()
		
		
</script>

<style>
	page {
		background-color: #F6F4F7;
	}
</style>

<style lang="scss">
	.root-box {


		.content {
			padding: 10rpx 20rpx;
			box-sizing: border-box;
		}
	}

	.form-box {
		
		border-radius: 20upx;
		background-color: #fff;
		padding: 30upx 60upx;
		box-sizing: border-box;
	}
	
	.bottom-box{
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	
	.push-user-box{
		display: flex;
		align-content: center;
	}
	
	.loop-user-box{
		padding: 20upx 20upx 20upx 0;
		box-sizing: border-box;
		
	}
</style>